<template>
    <ag-popup v-model="visible" :title="title" @onCancel="onCancel" class="popup-box">
        <div class="content">
            <el-form :inline="inline" :rules="rules" :model="form" ref="form" :label-width="labelWidth?labelWidth:'100px'">
                <!--标签显示名称-->
                <el-form-item v-for="item in formLabel" :key="item.model" :label="item.label" :prop="item.model">
                    <!--根据type来显示标签-->
                    <el-input size="small" v-model.trim="form[item.model]" :placeholder="'请输入' + item.label"
                        v-if="item.type==='input'">
                    </el-input>
                    <el-select size="small" v-model="form[item.model]" placeholder="请选择" v-if="item.type === 'select'">
                        <!--如果是select或者checkbox 、Radio需要选项信息-->
                        <el-option v-for="item in item.opts" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <el-switch size="small" v-model="form[item.model]" v-if="item.type === 'switch'"></el-switch>
                    <el-date-picker size="small" v-model="form[item.model]" type="date" placeholder="选择日期"
                        v-if="item.type === 'date'" value-format="yyyy-MM-dd"> </el-date-picker>
                </el-form-item>
                <!-- 扩展 -->
                <el-form-item>
                    <slot></slot>
                </el-form-item>
                <el-form-item class="bottom">
                    <el-button size="small" class="clear-btn" @click="onCancel()">取消</el-button>
                    <el-button size="small" type="primary" @click="submitForm('form')">确认</el-button>
                </el-form-item>
            </el-form>
        </div>
    </ag-popup>
</template>

<script>
    import AgPopup from '@/views/components/precut/AgPopup.vue';
    export default {
        data() {
            return {
                visible: true
            }
        },
        components: {
            'ag-popup': AgPopup,
        },
        props: {
            //弹窗名
            title: String,
            //排列样式 
            inline: Boolean,
            //表单数据
            form: Object,
            //标签数据
            formLabel: Array,
            //验证规则
            rules: Object,
            labelWidth: String
        },
        methods: {
            onShow() {
                this.visible = true;
            },
            onCancel() {
                this.visible = false;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$emit("onConfirm", this.form);
                        this.visible = false;
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
<style scoped>
    .content {
        padding: 20px 30px 20px 20px;
    }

    .el-form-item {
        color: #fff;
    }

    .content ::v-deep.el-form-item__label {
        color: #fff;
    }
    .bottom{
        text-align: right;
    }
    .clear-btn{
        background: transparent;
        color: #fff;
    }
</style>